import { ColorInputDemos, ColorPickerDemos } from "@/lib/@docs/demos/src";
import { Layout } from "@/layout";
import { MDX_DATA } from "@/mdx";

export default Layout(MDX_DATA.ColorInput);

## Usage

<InputFeatures component="ColorInput" element="input" />

<Demo data={ColorInputDemos.usage} />

## Controlled

```tsx
import { useState } from "react";
import { ColorInput } from "@mantine/core";

function Demo() {
  const [value, setValue] = useState("");
  return <ColorInput value={value} onChange={setValue} />;
}
```

## Formats

Component supports hex, hexa, rgb, rgba, hsl and hsla color formats.
Slider to change opacity is displayed only for hexa, rgba and hsla formats:

<Demo data={ColorInputDemos.formatsConfigurator} />

## Preserve invalid input

By default, `ColorInput` will revert the value on blur to the last known valid value.
To change this behavior and keep invalid value, set `fixOnBlur={false}`:

<Demo data={ColorInputDemos.fixOnBlur} />

## onChangeEnd

`onChangeEnd` is called when user stops dragging slider or changes input value.
It is useful when you need to update color only when user finished interaction with the component:

<Demo data={ColorInputDemos.onChangeEnd} />

## Disable free input

To disable free input set `disallowInput` prop:

<Demo data={ColorInputDemos.disallowInput} />

## With swatches

You can add any amount of predefined color swatches:

<Demo data={ColorInputDemos.swatches} />

By default, there will be 7 swatches per row, you can change this with `swatchesPerRow` prop,
like in [ColorPicker](/core/color-picker/) component:

<Demo data={ColorPickerDemos.swatchesConfigurator} />

If you need to restrict color picking to certain colors – disable color picker and disallow free input:

<Demo data={ColorInputDemos.swatchesOnly} />

## Close dropdown on color swatch click

To close the dropdown when one of the color swatches is clicked, set `closeOnColorSwatchClick` prop:

<Demo data={ColorInputDemos.closeOnColorSwatchClick} />

## Hide dropdown

To hide dropdown, set `withPicker={false}`:

<Demo data={ColorInputDemos.withPicker} />

## Eye dropper

By default, if [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API)
is available, eye dropper icon will be displayed at the right section of the input.
To disable it, set `withEyeDropper={false}`:

<Demo data={ColorInputDemos.noEyeDropper} />

## Change eye dropper icon

You can replace eye dropper icon with any React node using `eyeDropperIcon` prop:

<Demo data={ColorInputDemos.eyeDropperIcon} />

<InputSections component="ColorInput" />

Note that by default, `ColorPicker` has color preview in the left section and eye dropper button
in the right section. You can replace these elements with any React node using `leftSection`
and `rightSection` props:

<Demo data={ColorInputDemos.sections} />

## Error state

<Demo data={ColorInputDemos.error} />

## Disabled state

<Demo data={ColorInputDemos.disabled} />

## Read only

<Demo data={ColorInputDemos.readOnly} />

<StylesApiSelectors component="ColorInput" />

<Demo data={ColorInputDemos.stylesApi} />

<GetElementRef component="ColorInput" refType="input" />

<InputAccessibility component="ColorInput" />
